<template>
  <div>
 <div>姓名：{{ name }}</div>
<div>年龄：{{ age }}</div>
<button @click="changeName">改变姓名</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">展示电话</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  name:"Person",
 setup(){
   let name = ref('张三')
   let age = ref(18)
   let tel=ref('123456789')
   function changeName(){
     name.value = '李四'
   }
   function changeAge(){
     age.value +=1
   }
   function showTel(){
     alert(tel.value)
   }
   return {
     name,
     age,
     tel,
     changeName,
     changeAge,
     showTel
   }
 }
}
</script>

<style>

</style>